import style from "../assets/css/list.module.scss";

import { Tabs, Badge } from "antd-mobile";
import { useEffect, useState, useRef } from "react";
import { useHistory } from "react-router-dom";
import { getAllKind } from "../axios/api";
const Reading = () => {
  const history = useHistory();

  const [kind, setKind] = useState([]);

  useEffect(async () => {
    // const book_ = await axios.post("http://localhost:3007/api/getAllBook", {
    //   wirter
    // });

    // setBook(book_.data.data);

    const book_ = await getAllKind();
    console.log(book_.data.data, "data");

    setKind(book_.data.data);
  }, []);

  return (
    <div className={style.main}>
      <div className={style.haha}>
        <div className={style.title}>
          <i className={"iconfont icon-search"}> </i>
          <input placeholder="输入你要查找的作者" />
          {/* <input
            placeholder="输入你要查找的作者"
            value={wirter}
            onInput={(e) => {
              console.log(1);
              setWirter(e.target.value);
            }}
          /> */}

          <p>书城</p>
        </div>
        {/* 导航 */}
        <div className={style.head}>
          <div>
            <Tabs
              onChange={(key) => console.log(key)}
              style={{
                "--title-font-size": "15px",
              }}
            >
              <Tabs.Tab title="书架" key="书架"></Tabs.Tab>
              <Tabs.Tab title="书单" key="书单"></Tabs.Tab>
            </Tabs>
          </div>

          <div className={style.sele}>
            <p className="iconfont icon-dui"></p>
            <p>选择</p>
          </div>
        </div>

        <div className={style.nav}>
          <Tabs
            defaultActiveKey="kind"
            onChange={(key) => {
              if (key === "all") {
                history.push({ pathname: "/kind" });
              }
            }}
            style={{
              "--title-font-size": "15px",
            }}
          >
            <Tabs.Tab title="默认" key="all"></Tabs.Tab>
            <Tabs.Tab title="分类" key="kind"></Tabs.Tab>
          </Tabs>
        </div>
        {/* 以上导航 */}
      </div>

      {/* 中部 */}

      <div className={style.bdy}>
        <div className={style.list}>
          {kind.map((item, idx) => {
            return (
              <div
                key={idx}
                className={style.wrap}
                onClick={() => {
                  history.push({
                    pathname: "/kinddetail",
                    state: { types: item.type },
                  });
                }}
              >
                <div>
                  <img src={item.cover} />
                </div>
                <p>{item.type}</p>
                <p>{item.dec}本</p>
              </div>
            );
          })}
        </div>
      </div>

      {/* 底部 */}
      <div className={style.button}>
        <div>
          <i className="iconfont icon-yuedu"></i>
          {/* <p
            onClick={() => {
              this.props.history.push({ pathname: "/" });
            }}
          >

            阅读
          </p> */}

          <p
            onClick={() => {
              history.push({ pathname: "/" });
            }}
          >
            阅读
          </p>
        </div>
        <div>
          <i className="iconfont icon-shujia"></i>
          <p>书架</p>
        </div>
        <div>
          <i className="iconfont icon-faxian"></i>
          <p
          //   onClick={() => {
          //     history.push("/kind");
          //   }}
          >
            分类
          </p>
        </div>
        <div>
          <i className="iconfont icon-wode"></i>
          <p>我的</p>
        </div>
      </div>
    </div>
  );
};

export default Reading;
